<template>
  <div class="home-dashboard">
    <headerCom>
      <main class="main-body">
        <div class="sreachbox">
          <div class="dropdown">
            <van-dropdown-menu>
              <van-dropdown-item v-model="value1" :options="option1" />
              <van-dropdown-item v-model="value2" :options="option2" />
            </van-dropdown-menu>
          </div>
        </div>
        <main class="list-box">
          <span class="message-title">消息管理</span>
          <!-- 消息卡片列表（支持上滑加载下一页） -->
          <div class="message-list">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              loading-text="加载中..."
              @load="loadMore"
              offset="100"
            >
              <div v-for="item in list" :key="item.id" class="msg-card" @click="handleClick(item)">
                <div class="msg-header">
                  <span class="msg-title"
                    >通知
                    <img class="new-icon" src="../assets/home/new.png" alt="" />
                  </span>
                  <span class="msg-date">{{ item.date }}</span>
                </div>
                <div class="msg-content">{{ item.content }}</div>
              </div>
            </van-list>
          </div>

          <!-- 底部弹框：消息详情 -->
          <van-popup v-model:show="showDetail" position="bottom" round :style="{ height: '50%' }">
            <div class="detail-popup">
              <div class="detail-header">
                <span>消息详情</span>
                <van-icon name="cross" class="detail-close" @click="closeDetail" />
              </div>
              <div class="detail-body">
                <div class="detail-row">
                  <span class="detail-label">类型</span>
                  <span class="detail-value">通知</span>
                </div>
                <div class="detail-row">
                  <span class="detail-label">日期</span>
                  <span class="detail-value">{{ detailItem ? detailItem.date : '' }}</span>
                </div>
                <div class="detail-content">{{ detailItem ? detailItem.content : '' }}</div>
              </div>
            </div>
          </van-popup>
        </main>
      </main>
    </headerCom>
  </div>
</template>

<script setup lang="ts">
import headerCom from '@/components/headerCom.vue'
import tableCom from '@/components/tableCom.vue'

import { ref, reactive, onMounted } from 'vue'

const searchVal = ref('')

const value1 = ref(0)
const value2 = ref('a')
const option1 = [
  { text: '全部消息', value: 0 },
  { text: '未读', value: 2 },
  { text: '已读', value: 1 },
]
const option2 = [
  { text: '全部时间', value: 'a' },
  { text: '最近7天', value: 'b' },
  { text: '最近一个月', value: 'c' },
]

const columns = reactive([
  { title: '名称', prop: 'name', width: '90px' },
  { title: '状态', prop: 'status', width: '50px' },
  { title: '领用时间', prop: 'time', width: '100px' },
  { title: '领用人', prop: 'user', width: '60px' },
])

// 保留或继续使用的搜索函数
function searchFn(word) {
  console.log(word)
}
// 新的消息列表状态（与 AssetView 一致的 loading/finished 控制）
const list = ref<Array<{ id: number; date: string; content: string }>>([])
const loading = ref(false)
const finished = ref(false)
const page = ref(1)
const pageSize = 10

function fetchMessages(p: number, ps: number) {
  return new Promise<{ list: { id: number; date: string; content: string }[] }>((resolve) => {
    setTimeout(() => {
      const totalPages = 3
      if (p > totalPages) {
        resolve({ list: [] })
        return
      }
      const data = Array.from({ length: ps }, (_, i) => {
        const id = (p - 1) * ps + i + 1
        return {
          id,
          date: '2025-08-11',
          content: 'xxx设备报警，产生不可预测位置xxx设备报警，产生不可预测位置变更变更',
        }
      })
      resolve({ list: data })
    }, 1000)
  })
}

const loadMore = async () => {
  loading.value = true
  const { list: rows } = await fetchMessages(page.value, pageSize)
  if (rows.length) {
    list.value.push(...rows)
    page.value += 1
  } else {
    finished.value = true
  }
  loading.value = false
}

onMounted(() => {
  loadMore()
})

// 底部弹框状态
const showDetail = ref(false)
const detailItem = ref<{ id: number; date: string; content: string } | null>(null)

function handleClick(item) {
  detailItem.value = item
  showDetail.value = true
}

function closeDetail() {
  showDetail.value = false
}
</script>

<style lang="less" scoped>
.dropdown {
  padding: 0 12px;
  margin-bottom: 12px;
}
.main-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  .sreachbox {
    height: 60px;
  }
  // 让列表区域占满剩余空间并可滚动
  .list-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    min-height: 0; // 关键：允许子项在 flex 下滚动
    // 可按需移除边框
  }
  .message-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0; // 避免高度被内容撑满
    margin-top: 12px;
  }
  .msg-card {
    background: #f5f7fa;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
    cursor: pointer;
  }
  .msg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }
  .msg-title {
    color: #222222;
    font-size: 16px;
    font-weight: 600;
  }
  .new-icon {
    width: 22px;
    height: auto;
  }
  .msg-date {
    color: #bfbfbf;
    font-size: 15px;
  }
  .msg-content {
    color: #7d7d7d;
    font-size: 14px;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.next-loading {
  color: #969799;
  font-size: 14px;
  text-align: center;
  height: 50px;
  width: 100%;
  line-height: 50px;
}
.message-title {
  color: #333333;
  font-size: 16px;
  font-weight: 600;
}
.detail-popup {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
}
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 12px;
  color: #333333;
}
.detail-close {
  font-size: 20px;
  color: #999;
}
.detail-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}
.detail-label {
  color: #999;
}
.detail-value {
  color: #333;
}
.detail-content {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  white-space: normal;
  word-break: break-word;
}
</style>
